import React, { Fragment, useState } from 'react'
import { useEffect } from "react";
import { useParams } from "react-router";
import _ from "lodash"
import CommsApi from "../../api/comms"
import { useAllTypes } from '../../hook/allTypes';
import { useOneComm } from "../../hook/oneComm";
import { useHistory } from "react-router";


// 引入antd
import {
    Form,
    Input,
    Button,
    Card,
    message,
    InputNumber,
    Cascader,
    Modal,
    Breadcrumb
} from 'antd';

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};



// eslint-disable-next-line
export default () => {
    const { _id } = useParams()
    console.log(_id);
    const history = useHistory()
    const [comm, { getOneComm }] = useOneComm();
    const [allType, { getAllTypes }] = useAllTypes();
    // 指向输入框
    const [form] = Form.useForm();

    useEffect(() => {
        getOneComm(_id)
        getAllTypes()
    }, [_id, getOneComm,getAllTypes])

    const onFinish = async (values) => {
        const { childId, name, count, price, desc } = values;
        console.log(_id);
        const data = await CommsApi.reset({ childId: childId[1], name, count, price, desc, _id });
        if (data) {
            setIsModalVisible(true);
        } else {
            message.error('添加失败！');
        }
    };

    // 重构类型数据结构
    const options = _.map(allType, item => {
        return {
            label: item.title,
            value: item._id,
            children: _.map(item.labels, i => {
                return {
                    label: i.title,
                    value: i._id
                }
            })
        }
    });
    console.log(options);
    const onClick = async () => {
        await getOneComm(_id)
        history.push(`/info/comms/upload/${_id}`)
    }

    // 对话框状态设置
    const [isModalVisible, setIsModalVisible] = useState(false);


    const handleOk = () => {
        setIsModalVisible(false);
        history.push(`/info/comms/upload/${_id}`)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
        history.push(`/info/comms`)
    };
    return <Fragment>
        <Card>
            <Breadcrumb>
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Item>
                    商品
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="http://localhost:3000/#/info/comms">商品列表</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    修改商品
                </Breadcrumb.Item>
            </Breadcrumb>
        </Card>
        <Card title="修改商品" bordered={true} style={{ margin: "30px" }}>
            <Form
                {...formItemLayout}
                form={form}
                name="comm"
                onFinish={onFinish}
                scrollToFirstError
                style={{ width: "500px", margin: "auto" }}
            >
                <Form.Item
                    name="name"
                    label="商品名称"
                    initialValue={comm.name}
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称！',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="count"
                    label="商品库存"
                    initialValue={comm.count}
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称！',
                        },
                    ]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    name="price"
                    label="商品价格"
                    initialValue={comm.price}
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称！',
                        },
                    ]}
                >
                    <InputNumber />
                </Form.Item>
                <Form.Item
                    name="desc"
                    label="商品详情"
                    initialValue={comm.desc}
                    rules={[
                        {
                            required: true,
                            message: '请输入商品详情！',
                        },
                    ]}
                >
                    <Input.TextArea />
                </Form.Item>
                <Form.Item
                    name="childId"
                    label="商品类型"
                    initialValue={[comm.parentId, comm.childId]}
                    rules={[
                        {
                            required: true,
                            message: '请输入商品名称！',
                        },
                    ]}
                >
                    <Cascader options={options} placeholder="请选择商品类型"  ></Cascader>
                </Form.Item>
                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        确认修改
                    </Button>
                    <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                        <p>修改商品成功，是否需要修改商品图片？</p>
                    </Modal>
                    <Button onClick={onClick} style={{ marginLeft: "20px" }}>
                        上传图片
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    </Fragment>
}